<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-16 10:01
  PageName：a_practice1_WebPageFont.html
  Function：实战案例 - 配置网页字体大小
  URL：http://localhost:8080/e3_webpage_CSS3_TextStyle/a_practice1_WebPageFont.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 配置网页字体大小</title>

    <style type="text/css">
        body {
            /*font-size:0.75em;*/
            font-size: 75%;
        }

        #header h1 {
            font-size: 1.333em;
        }

        #main h2 {
            font-size: 1.167em;
        }

        #nav li {
            font-size: 1.08em;
        }

        #footer p {
            font-size: 0.917em;
        }
    </style>
</head>

<body>
<div id="wrap">
    <div id="header">
        <h1>网站标题（<span style="font-size:16px;">网站标题-16px</span>）</h1>
    </div>

    <ul id="nav">
        <li>菜单（<span style="font-size:13px;">菜单-13px</span>）</li>
    </ul>

    <div id="main">
        <h2>栏目标题（<span style="font-size:14px;">栏目标题-14px</span>）</h2>
        <p>网页正文（<span style="font-size:12px;">网页正文-12px</span>）</p>
    </div>

    <div id="footer">
        <p>版权信息（<span style="font-size:11px;">版权信息-11px</span>）</p>
    </div>
</div>
</body>
</html>